<template>
    <PopUps :bgIndex="1000" :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="header">
                <div class="header-top">
                    <h3>{{ props.popTitle }}</h3>
                    <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
                </div>
                <div class="headerMain">
                    <el-form ref="formRef" :inline="true" :model="venderForm" :rules="rules" class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in venderFormLabel"
                            :key="index" :style="{ 'min-width': `${item.minWidth}'!important'` }">
                            <!-- 输入框 -->
                            <div class="optionsInput">
                                <el-input v-model="venderForm[item.name]" clearable
                                    :disabled="item.disabled || props.disabled" v-if="!item.type || item.type == 'input'" />
                            </div>
                            <!-- 下拉选框 -->
                            <el-select v-model="venderForm[item.name]" clearable v-if="item.type == 'select'"
                                :disabled="props.disabled">
                                <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in item.client"
                                    :key="index" />
                            </el-select>
                            <!-- 日期选框 -->
                            <el-date-picker v-else-if="item.type == 'picker'" v-model="venderForm[item.name]" type="date"
                                :disabled="props.disabled" placeholder="请输入日期" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" />
                            <!-- 文本域 -->
                            <el-input v-model="venderForm[item.name]" type="textarea" v-else-if="item.type == 'textarea'"
                                :disabled="props.disabled" />
                        </el-form-item>
                    </el-form>
                </div>

            </div>
            <div class="main">
                <div class="main-top">
                    <h3>供应商其他联系人</h3>
                </div>
                <div class="mainContent">
                    <customerTable :tableHeaderData="tableHeaderData" :tableData="tableData" :operate="true" :bg="'#F6F8FE'"
                        @handleDelete="handleDelete" :disabled="disabled" />

                    <div class="addTable">
                        <span @click="addTable">增加一行</span>
                    </div>
                    <div class="content-lable label-flex remarks-box">
                        <p class="lable-p remarks">备注</p>
                        <el-input v-model="venderForm.remarks" type="textarea" :disabled="props.disabled" />
                    </div>
                    <div class="btn">
                        <el-button type="primary" @click="onSubmit(formRef)" class="submit"  v-if="props.defindFlag">{{ props.popTitle.slice(0, 2)
                        }}</el-button>
                        <el-button type="primary" @click="closePopUps" class="reset" color="#E4E9FC">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
import { reactive, ref, defineEmits, defineProps,onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { createInsertSupplierApi } from '@/api/inventory'
import customerTable from '../../customer/components/customerTable';
const emit = defineEmits(['popUpsFlase'])
const formRef = ref(null)
let props = defineProps(['popTitle', 'disabled', 'PopData', 'defindFlag'])
// 表单
let venderForm = ref({
    supplierId: '后台生成',      // 供应商编号
    contactPerson: '',           // 联系人
    creationTime: '',              // 新增日期
    responsiblePerson: '',       // 经办人
    supplierName: '',            // 供应商名称
    contactPhone: '',            // 联系电话
    cooperativeStatus: '',       // 合作状态
    supplierAddress: '',                    // 供应商地址
    remarks: '',                    // 备注
})
// 表单数据标题
let venderFormLabel = ref([
    {
        name: 'supplierId',
        label: '供应商编号',
        disabled: true
    },
    {
        name: 'contactPerson',
        label: '联系人',
    },
    {
        name: 'creationTime',
        label: '新增日期',
        type: 'picker',
    },
    {
        name: 'responsiblePerson',
        label: '经办人',
    },
    {
        name: 'supplierName',
        label: '供应商名称',
    },
    {
        name: 'contactPhone',
        label: '联系电话',
    },
    {
        name: 'cooperativeStatus',
        label: '合作状态',
        type: 'select',
        client: [
            {
                label: '合作中',
                value: '0'
            },
            {
                label: '停止合作',
                value: '1'
            },
        ]
    },

    {
        name: 'supplierAddress',
        label: '供应商地址',
    }
])
// 客户其他联系人
// 表格内容
const tableData = ref([
    {
        name: '',       // 姓名
        gender: '',     // 性别
        office: '',     // 职务
        dept: '',       // 部门
        contactPhone: '',   // 联系电话
        address: '',        // 地址
        supplierId: "",
    }
])

// 表格头部
const tableHeaderData = ref([
    {
        prop: 'name',
        label: '姓名',
        width: '150px'
    },
    {
        prop: 'gender',
        label: '性别',
        width: '150px'
    },
    {
        prop: 'office',
        label: '职务',
        width: '150px'
    },
    {
        prop: 'dept',
        label: '部门',
        width: '150px'
    },
    {
        prop: 'contactPhone',
        label: '联系电话',
        width: '150px'
    },
    {
        prop: 'address',
        label: '地址',
        colorClassName: 'addressInput',
        width: '300px'
    },
])
// 入库信息校验
const rules = reactive({
    contactPerson: [
        {
            required: true,
            message: '联系人',
            trigger: 'change',
        }
    ],
    creationTime: [
        {
            required: true,
            message: '新增日期',
            trigger: 'change',
        }
    ],
    responsiblePerson: [
        {
            required: true,
            message: '经办人',
            trigger: 'change',
        },
    ],
    supplierName: [
        {
            required: true,
            message: '供应商名称',
            trigger: 'change',
        },
    ],
    contactPhone: [
        {
            required: true,
            message: '联系电话',
            trigger: 'change',
        },
        {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
        }
    ],

    supplierAddress: [
        {
            required: true,
            message: '供应商地址',
            trigger: 'change',
        },
    ],
})
// 新增一行表格
const addTable = () => {
    if (!props.disabled) {
        tableData.value.push({
            supplierId: "",
            name: '',
            gender: '',
            office: '',
            dept: '',
            contactPhone: '',
            address: '',
        })
    }
}
// 删除一行表格
const handleDelete = (props) => {
    if (tableData.value.length > 1) {
        tableData.value.splice(props.i, 1)
    } else {
        ElMessage({
            type: 'warning',
            message: '再删就没有了(*——*)',
        })
    }
}
// 新增
const onSubmit = (formRef) => {
    ElMessageBox.confirm(
        '确认' + props.popTitle + '信息？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(async () => {
        if (!formRef) return
        await formRef.validate((valid) => {
            if (valid) {
                venderForm.value.supplierId = ''
                let parasm = venderForm.value
                parasm.supplierContactsVOS = tableData.value
                createInsertSupplierApi(parasm).then(res => {
                    venderForm.value.supplierId = '后台生成'
                    if (res.code == 200) {
                        emit('getoutboundOrderData')
                        closePopUps()
                        ElMessage({
                            type: 'success',
                            message: res.msg,
                        })
                    }
                })
            }
        })
    })
}
// 关闭
const closePopUps = () => {
    emit('popUpsFlase', false)
}
// 数据回显
const assignmentFun = () => {
    // 表单
    let {
        supplierId,      // 供应商编号
        contactPerson,           // 联系人
        creationTime,              // 新增日期
        responsiblePerson,       // 经办人
        supplierName,            // 供应商名称
        contactPhone,            // 联系电话
        cooperativeStatus,       // 合作状态
        supplierAddress,                  // 供应商地址
        remarks                   // 备注
    } = props.PopData
    venderForm.value = {
        supplierId,      // 供应商编号
        contactPerson,           // 联系人
        creationTime,              // 新增日期
        responsiblePerson,       // 经办人
        supplierName,            // 供应商名称
        contactPhone,            // 联系电话
        cooperativeStatus,       // 合作状态
        supplierAddress,                    // 供应商地址
        remarks,                    // 备注
    }
    // 表格
    tableData.value = props.PopData.supplierContactsVOS
}
onMounted(() => {
    // 数据回显
    if (!props.defindFlag) {
        assignmentFun()
    }
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.el-input__wrapper {
    --el-select-width: 220px;
}

:deep(.el-form-item) {
    width: 250px;
}

:deep(.el-form-item__label) {
    width: 150px;
    text-align: right;
}

@mixin publicH3 {
    font-weight: 550;
    position: relative;
    font-size: 16px !important;

    &::after {
        content: '';
        width: 5px;
        height: 20px;
        background-color: #1947FF;
        border-radius: 5px;
        position: absolute;
        left: -15px;
        top: 0px;
    }
}

@mixin titlePadding {
    padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {
    :deep(.el-form-item) {
        margin-right: 30px !important;
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
    }

    :deep(.el-input__wrapper) {
        width: 132px;
    }

    :deep(.el-date-editor--datetimerange) {
        width: 240px;
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
}

@mixin flex {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

@mixin label {
    width: 120px;
    text-align: right;
    padding-right: 12px;
    font-size: 14px;
}

.label-flex {
    @include flex
}

.lable-p {
    @include label
}

.popups-box {
    max-height: 650px;
    overflow-y: scroll;

    .header {
        .header-top {
            @include titlePadding;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0px;
            background: #FFF;
            z-index: 2024;

            h3 {
                @include publicH3;
            }

            .iconfont {
                color: #666;
                font-size: 27px;
            }
        }

        .headerMain {
            .demo-form-inline {
                @include pubilcForm;
            }
        }
    }

    .main {
        .main-top {
            @include titlePadding;

            h3 {
                @include publicH3;
            }
        }

        .mainContent {
            padding: 20px;

            .remarks {
                width: 400px;
            }

            .remarks-box {
                .remarks {
                    width: 63px;
                }

                :deep(.el-textarea) {
                    width: 180px;
                }
            }

            .demo-form-inline {
                margin-top: 20px;
                @include pubilcForm;

            }

            .addTable {
                width: 100%;
                text-align: right;
                margin: 20px 0;
                color: #1947FF;
                cursor: pointer;
            }

            .btn {
                text-align: right;
                margin-top: 65px;

                .el-button {
                    width: 50px;
                    height: 25px;
                    font-size: 12px;
                }

                .reset {
                    background-color: #E4E9FC;
                    color: #333;
                    border: none;
                }
            }
        }
    }
}
</style>